<template>
	<view class="page tn-safe-area-inset-bottom" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="top-bg"></view>
		<dawnBar :title="title"></dawnBar>
		<view class="page-container" style="padding-bottom: 140rpx;">
			<pBox @search="getData()" :search="true"></pBox>
			<!-- <view v-if="date_items.length > 0" class="tn-bg-white dawn-radius dawn-shadow tn-margin-top-sm">
				<tn-scroll-list :indicator="false">
					<view class="tn-width-full tn-flex tn-flex-row-around tn-margin-top-sm">
						<block v-for="(item,index) in date_items" :key="index">
							<view class="" @click="selDate(item)">
								<view class="dawn-radius tn-padding tn-text-ellipsis tn-text-center"
									:class="queryData.searchDate === item.day?'tn-bg-dawn':'tn-bg-dawn-gray'">
									<view @click="selDate(item)">
										{{item.showDate}}
									</view>
								</view>
							</view>
						</block>
					</view>
				</tn-scroll-list>
			</view> -->
			<view class="tn-bg-white dawn-shadow tn-padding dawn-radius tn-margin-top-sm">
				<view class="list-text">
					<view class="list__left">
						<view class="list__left__text">报告日期</view>
					</view>
					<view class="list__right list-text__right" @click="showCalendar = true">
						{{ dateStr || '请选择报告日期' }}
						<text class="tn-icon-right tn-padding-left-ss"></text>
						<tn-calendar @change="dateConfirm" :changeMonth="true" v-model="showCalendar"
							:params="params" mode="range" toolTips="报告日期范围" startText="开始"
							endText="结束"></tn-calendar>
					</view>
				</view>
			</view>
			<view class="order--wrap tn-margin-top-sm">
				<view v-for="(item,index) in list" :key="index" class="tn-bg-white dawn-shadow tn-padding dawn-radius tn-margin-top-sm">
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">医嘱ID</view>
						</view>
						<view class="list__right list-text__right">
							{{item.regNo || '' }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">报告名称</view>
						</view>
						<view class="list__right list-text__right">
							{{item.outReportClass || '' }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">报告类别</view>
						</view>
						<view class="list__right list-text__right">
							{{item.outReportType || '' }}
						</view>
					</view>
					<view class="list-text">
						<view class="list__left">
							<view class="list__left__text">{{item.reportTime || '' }}</view>
						</view>
						<view class="list__right list-text__right">
							<tn-button @click="navDteail(item)" size="sm" class="dawn-btn-sm dawn-btn-sm__main">
								<text class="tn-icon-send-fill">详情</text>
							</tn-button>
						</view>
					</view>
				</view>	
				
				<!-- 悬浮按钮-->
				<view class="tn-flex tn-footerfixed">
					<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
						<tn-button @click="getData()" class="dawn-btn-lg dawn-btn-lg__main">
							<text class="tn-icon-search-list-fill tn-padding-right-xs"></text>
							<text>查 询</text>
						</tn-button>
					</view>
				</view>
			</view>
			<view v-if="show">
				<dawnMsg :msg="msg"></dawnMsg>
			</view>
		</view>

		<!-- loading -->
		<dawnLoading :show="loading"></dawnLoading>

		<!-- 分页 -->
		<!-- <dawn-pagination ref="pagination" :current="queryData.pageNo" :total="total" @pagination="getPage" /> -->

		<!-- 悬浮按钮-->
		<NavBtn></NavBtn>
	</view>
</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from '@/plugin/dayjs/dayjs.min.js';
	import * as DateUtil from '@/utils/date.js';
	import * as ReportApi from "@/api/hospital/report.js";
	import * as api from '@/api/api.js';
	import * as config from "@/api/config.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();

	export default {
		name: 'order',
		mixins: [page_mixin],
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'patientInfo']),
		data() {
			return {
				loading: false,
				show: false,
				msg: '',
				title: '',
				showCalendar: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				dateStr: '',
				queryData: {
					reportType: '',
					startDate: '',
					endDate: '',
					searchDate: '7',
					patientId: '',
					patientName: ''
				},
				date_items: [{
						showDate: '1周内',
						day: '7',
						activeIcon: ''
					},
					{
						showDate: '1个月内',
						day: '30',
						activeIcon: ''
					},
					{
						showDate: '3个月内',
						day: '90',
						activeIcon: ''
					},
					{
						showDate: '6个月内',
						day: '180',
						activeIcon: ''
					},
				],
				list: []
			}
		},
		onLoad(options) {
			console.info("query onLoad")
			if (!this.isLogin) {
				toLogin();
				return;
			} else {
				if (options.hasOwnProperty('reportType')) {
					this.queryData.reportType = options.reportType;
					if (options.reportType === 'test') {
						this.title = '检验报告';
					} else if (options.reportType === 'check') {
						this.title = '检查报告';
					}
				}
				this.initDate();
			}
		},
		methods: {
			initDate: function() {
				// const date = DateUtil.getWeekTimes();
				const date = DateUtil.getMonthTimes();
				this.queryData.startDate =  dayjs(date[0]).format("YYYY-MM-DD");
				this.queryData.endDate =  dayjs(date[1]).format("YYYY-MM-DD");
				this.dateStr = this.queryData.startDate +' 至 '+ this.queryData.endDate;
			},
			selDate(item) {
				this.queryData.searchDate = item.day;
				this.getData();
			},
			// 日期选择器
			dateConfirm(event) {
				console.table(event)
				// const date = event.year + '-' + event.month + '-' + event.day +
				// 	' ' + event.hour + ':' + event.minute + ':' + event.second;
				this.queryData.startDate = event.startDate;
				this.queryData.endDate = event.endDate;
				this.dateStr = `${event.startDate} 至 ${event.endDate}`;
				this.getData();
			},
			getData: function() {
				if (!this.patientInfo.id) {
					this.show = true;
					this.msg = '请先添加就诊人！';
					return;
				}
				if(this.queryData.startDate === ''){
					return false;
				}
				let that = this;
				this.loading = true;
				this.show = false;
				this.$set(this, 'list', []);
				this.queryData.pid = this.patientInfo.id;
				this.queryData.userId = this.patientInfo.openid;
				this.queryData.patientId = this.patientInfo.patientId;
				this.queryData.patientName = this.patientInfo.name;
				ReportApi.list(this.queryData).then(res => {
					this.loading = false;
					console.table(res);
					if (res.code === 0) {
						const l = res.data || [];
						this.$set(this, 'list', l);
						if (l.length == 0) {
							this.show = true;
							this.msg = '未查询到报告数据';
						}
					} else {
						this.show = true;
						this.msg = res.msg;
					}
				}).catch(err => {
					this.loading = false;
					this.show = true;
				})
			},
			navDteail(item) {
				const queryData = new Object();
				queryData.inReportNum = item.outReportID;
				queryData.inReportID = item.regNo;
				queryData.lx = item.lx;
				queryData.outReportType = item.outReportType;
				queryData.reportType = this.queryData.reportType;
				// uni.navigateTo({
				// 	url: '/hosp/report/detail?params=' + JSON.stringify(queryData)
				// })
				
				this.$util.setStorageData(config.STORE_KEY.REPORT_DETAIL, queryData)
				uni.navigateTo({
					url: '/hosp/report/detail'
				})
			},
			formatDate: function(date) {
				return dayjs(date).format("YYYY-MM-DD");
			},
			formatDateTime: function(date) {
				return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx 0rpx !important;
		border-bottom: 1px solid $dawn-line-color;
	
		&__right {
			font-size: $dawn-font-size-md;
		}
	}
</style>